<script setup>
import { ref, computed, onMounted } from "vue";
import { getConfig } from "../services/api";
import { useRouter } from 'vue-router';

const router = useRouter();
const searchQuery = ref("");
// 模拟产品数据
const products = ref([]);


// 获取产品数据的函数
const fetchProducts = async () => {
  try {
    const response = await getConfig()
    products.value = response; 
  } catch (error) {
    console.error("获取产品数据失败", error);
  }
};

// 跳转到产品详情页面
const goToProductDetail = (productId) => {
  console.log(productId)
  router.push({ name: 'Detail', params: { "id": productId } });
};


// 过滤产品列表
const filteredProducts = computed(() =>
  products.value.filter((p) =>
    p.Title.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
);

// 在组件挂载后请求数据
onMounted(() => {
  fetchProducts();
});
</script>

<template>
  <div class="bg">
    <div class="container">
      <!-- 标题栏 -->
      <div class="header">
        <h2 style="color:white">杭州正宇 - 产品列表</h2>
        <p style="color:orange;font-size: 20px;">
          <el-icon style="font-size: 27px;"><Phone /></el-icon>
          <span style="margin-left: 5px;font-weight:bolder;">联系热线：188-8888-8888 </span>
        </p>
      </div>
      <!-- 搜索框 -->
      <el-input
        v-model="searchQuery"
        placeholder="搜索我们的产品..."
        prefix-icon="el-icon-search"
        class="search-box"
      />
  
      <!-- 产品列表 -->
      <el-row :gutter="24">
        <el-col
          v-for="product in filteredProducts"
          :key="product.ItemId"
          :span="24"
        >
          <el-card shadow="hover" class="product-card">
            <div class="product" @click="goToProductDetail(product.ItemId)">
              <!-- 产品图片 -->
              <img :src="product.imageList[0]" class="product-image" />
  
              <!-- 产品信息 -->
              <div class="product-info">
                <h3>{{ product.Title }}</h3>
                <p>{{ product.Introduce }}</p>
                <p class="price" style="color:red">{{ product.Price }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>

/* 容器 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 搜索框 */
.search-box {
  width: 100%;
  height: 50px;
  font-size: 18px;
  margin-bottom: 20px;
}

/* 产品卡片 */
.product-card {
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: scale(1.02);
}

/* 产品信息 */
.product {
  display: flex;
  align-items: center;
  gap: 15px;
}

.bg{
  width: 100%;
  min-height: 1000px;
  height: auto;
  background: url("@/assets/images/loginbg.jpg") no-repeat center center;
  background-size: cover;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
}

.product-info {
  flex: 1;
}

.product-info h3 {
  font-size: 18px;
  margin: 0;
}

.product-info p {
  color: #666;
  margin: 5px 0;
}

.price {
  font-size: 16px;
  font-weight: bold;
  color: red;
}

/* 响应式：适配小屏幕 */
@media (max-width: 600px) {
  .product {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-image {
    width: 100%;
    height: auto;
  }
}
</style>
